<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.11.3.js"></script>

    <script>
        $(function (){
            var $p = $('#p');
            var $c = $('#c');
            //页面加载 发送AJAX请求获取省份的数据
            $.get('/provinces',function (data){
                //遍历省份数组
                data.forEach(function (value){
                    $p.append('<option value="'+value.id+'">'+ value.name + '</option>');
                });
            });
           //给省份下拉框绑定值 当改变事件发生时 将省份的ID传递给服务端 获取到对应的城市的数据
           //并返回给页面进行渲染
           $p.change(function (){
               //获取被选中省份的下拉框的option 的value属性  即省份的id值
               var pid = $(this).val();
               //先清空城市原有的内容 如果不清空 那么选择其他省份的时候 城市信息会叠加
               $c.empty();
               $c.append('<option value="-1">---请选择---</option>');

               if (pid >= -1){
                   $.get('/cities','pid='+pid,function (data){
                       //遍历城市数据
                       data.forEach(function (value){
                           $c.append('<option value="' + value.id + '">' + value.name + '</option>');
                       });
                   });
               }
           })

        });
    </script>
</head>
<body>

省份：<select id="p">
    <option value="-1">---请选择---</option>
</select>
城市：<select id="c">
    <option value="-1">---请选择---</option>
</select>

</body>
</html>